<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-1.11.3.min.js"></script>
	<script src="dialog.js"></script>
</head>
<style>
	.login{
		width: 300px;
		height: 300px;
		background: white;
		border: 1px solid;
		position: absolute;
		left: 0;
		top: 40px;
		z-index: 2;
	}
	.title{
		height: 30px;
		background: gray;
		color: white;
	}
	.title .close{
		float: right;
	}
	#mark{
		width: 500px;
		height: 500px;
		background: black;
		opacity: 0.5;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 1;
	}
	#dialog-wrap{
	width: 200px;
    height: 200px;
    position: relative;
    top: 10px;
    z-index: 999;
    border: 1px solid red;
	}
</style>
<body>
	<input type="button" value="1">
	<!-- <input type="button" value="2">
	<input type="button" value="3"> -->
	<div class="login">
		<!-- <div class="title">
			<span>标题</span>
			<span class="close">X</span>
		</div>
		<div class="content"></div> -->
	</div>
	<!-- <div id="mark"></div> -->
	<script type="text/javascript">
	var aInput = document.getElementsByTagName('input');
	aInput[0].onclick = function(){
		var d1 = new dialog();
		d1.init({//配置参数
			msg:'登录',
			fun:"北京"
		});
	}
	function Dialog(){
		this.oLogin = null;
		this.settings = {//默认参数
			w:300,
			h:300,
			dir:'center',
			title:'',
			mark:false
		}
	}
	Dialog.prototype.init = function(opt){
		extend(this.settings,opt);
		this.create();
		this.fnClose();
		if(this.settings.mark){
			this.createMark();
		}
	}	
	Dialog.prototype.create= function(){
		this.oLogin = document.createElement('div');
		this.oLogin.className = 'login';
		this.oLogin.innerHTML = '<div class="title"><span>'+this.settings.title+'</span><span class="close">X</span></div><div class="content"></div>';
		document.body.appendChild(this.oLogin);
		this.setData();
	}
	Dialog.prototype.setData = function(){
		this.oLogin.style.width = this.settings.w+'px';
		this.oLogin.style.height = this.settings.h+'px';
		if(this.settings.dir =='center'){
			this.oLogin.style.left = (viewWidth()-this.oLogin.offsetLeft)/2+'px';
			this.oLogin.style.top = (viewHeight()-this.oLogin.offsetTop)/2+'px';
		}else if(this.settings.dir=='right'){
			this.oLogin.style.left = (viewWidth()-this.oLogin.offsetLeft)+'px';
			this.oLogin.style.top = (viewHeight()-this.oLogin.offsetTop)+'px';
		}
	}
	function viewWidth(){
		return document.documentElement.clientWidth;
	}
	function viewHeight(){
		return document.documentElement.clientHeight;
	}
	Dialog.prototype.fnClose = function(){
		var oClose = this.oLogin.getElementsByTagName('span')[1];
		var This = this;
		oClose.onclick = function(){
			document.body.removeChild(This.oLogin);
			// This.oLogin.remove();
			if(This.settings.mark){
				This.oMark.remove();
			}
		}
	}
	Dialog.prototype.createMark = function(){
		var oMark = document.createElement('div');
		oMark.id='mark';
		document.body.appendChild(oMark);
		this.oMark = oMark;
		oMark.style.width = viewWidth()+'px';
		oMark.style.height = viewHeight()+'px';
	}
	function extend(obj1,obj2){
		for(var attr in obj2){
			obj1[attr] = obj2[attr];
		}
	}
	</script>
</body>
</html>
